<template>
	
	<view class="">
		<view class="order-sc-b" v-for="(item,index) in work_flow_list" :key="index">
			<view class="or-hi">
			</view>
			<view class="order-sc-b-c">
				<view class="order-sc-b-c-t">
					<view class="order-sc-b-c-t-l">
						【{{item.type_data==7||item.user_id==0?'平台':item.user.nickname}}】{{item.title}}{{item.progress?item.progress:''}}
					</view>
					<view class="order-sc-b-c-t-r">
						{{item.createtime_text}}
					</view>
				</view>
				<!-- 成本 -->
				<view class="order-sc-b-c-c" v-if="item.content.money">
					<view class="order-sc-b-c-p-a" style="padding-left: 16rpx;display: flex;align-items: center;">
						<image src="../static/price.png" mode=""
							style="width: 32rpx;height: 32rpx;margin-right: 15rpx;"></image>
						<text>价格金额为：{{item.content.money}}元</text>
					</view>
					<view class="order-sc-b-c-p-c" v-for="(item3,idnex3) in item.content.substance" :key='index3'>
						<view class="order-pri-a">
							名称：<text class="order-pri-b">{{item3.name}}</text>
						</view>
						<view class="order-pri">
							<view class="order-pri-a">
								报价：<text class="order-pri-b">{{item3.money}}元</text>
							</view>
							<view class="order-pri-a">
								数量：<text class="order-pri-b">{{item3.number}}件</text>
							</view>
						</view>

					</view>
				</view>
				<!-- 报修 方案 勘察 -->
				<view class="order-sc-b-c-c" style="display: flex;align-items: center;justify-content: space-between;" v-else>

					<text>{{item.title=='更新了报价'?('价格金额为：'+item.content+'元'):item.content}} </text>
					<view class="jiedan" v-if="item.title=='申请结单'"  @tap="jumpJiedan(item.service_id,item.report_id)">
						<!--  //状态:0=申请维修,1=待维修,2=申请结单,3=已完成 -->
						查看
					</view>	
				</view>
				<view class="order-sc-b-c-f" v-if="item.multiMedia">
					<view class="order-sc-b-c-f-t" style="display: flex;align-items: center;">
						
						<text>附件</text>
						<image src="../static/fujian.png" style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" mode=""></image>
					</view>
					<view class="order-sc-b-c-f-i">
						<view class="order-sc-b-c-f-i-i" style="" v-for="(item2,index2) in item.multiMedia.imgs" :key='index2'>
							<image :src="item2" mode=""
							@tap="preImg(item2)"
							></image>
						</view>
						<view class="order-sc-b-c-f-i-i" v-if="item.multiMedia.video">
							<video :src="item.multiMedia.video"></video>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "workFlow",
		props: {
			work_flow_list: Array
		},
		data() {
			return {

			};
		},
		methods:{
			preImg(item2){
				let arr=[]
				arr.push(item2)
				uni.previewImage({
					urls:arr
				})
			},
			jumpJiedan(id,report_id){
				this.$parent.placeJiedan(id,report_id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.jiedan{
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color:$public-oclor;
		border-radius: 32rpx;
		text-align: center;
		line-height: 48rpx;
		opacity: 1;
		border: 1rpx solid $public-oclor;
		width: 96rpx;
		height: 48rpx;
	}
	.order-sc-b::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: $public-oclor;
		position: absolute;
		left: 20rpx;
		top: 28rpx;
	}

	.order-sc-b-c::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: calc(100% + 40rpx);
		background-color: $public-oclor;
		position: absolute;
		left: -21.5rpx;
		top: -20rpx;
	}

	.order-sc {
		&-b {
			position: relative;
			background-color: #FFFFFF;
			padding: 20rpx 48rpx;

			&-c {
				position: relative;
				padding-bottom: 32rpx;

				&-p {
					&-a {
						height: 80rpx;
						background: #F6F6FB;
						font-size: 24rpx;
						font-weight: 500;
						color: #F24C17;
						line-height: 80rpx;
						padding-top: 16rpx;
					}
				}

				&-t {
					display: flex;
					justify-content: space-between;
					position: relative;

					&-l {
						font-size: 24rpx;
						font-weight: 500;
						color: #303030;
					}

					&-r {
						font-size: 20rpx;
						font-weight: 400;
						color: #969699;
					}
				}

				/* &-t::before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 0px;
					left: -32rpx;
					border-radius: 50%;
					background-color: #C6C7CB;
				} */

				&-c {
					margin: 16rpx 0 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #969699;
					line-height: 36rpx;
					position: relative;

					&-p {
						color: $public-oclor;
						border-bottom: 2rpx solid $public-oclor;
					}
				}

				&-f {
					padding: 0 32rpx;

					&-t {
						font-size: 24rpx;
						font-weight: 500;
						color: $public-oclor;
						line-height: 24rpx;
						margin: 28rpx 0 26rpx;
					}

					&-i {

						&-i {
							width: 120rpx;
							height: 120rpx;
							background-color: #F5F6F8;
							margin-right: 26rpx;
							display: inline-block;

							image {
								width: 100%;
								height: 100%;
							}

							video {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				/* &-c::before {
					content: '';
					width: 6rpx;
					height: 100rpx;
					position: absolute;
					top: -10rpx;
					left: -22rpx;
					background: #C6C7CB;
				} */
			}

			&-c::before {}



			&-c::after {}
		}
	}



	.order-sc-b-c-p-c {
		background: #F6F7FB;
		margin-top: 20rpx;
		padding: 16rpx 16rpx 0;

		.order-pri {
			display: flex;

			&-a {
				color: #969699;
				font-size: 24rpx;
				width: 50%;

			}

			&-b {
				color: #000000;
				font-size: 24rpx;
			}
		}
	}

	.order-sc-b-c-p-c>.order-pri:nth-child(2) {
		padding: 24rpx 0 20rpx;
		color: teal;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1) {
		padding-right: 150rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1)::before {
		content: '';
		width: 4rpx;
		height: 100%;
		position: absolute;
		right: 75rpx;
		background-color: rgba(0, 0, 0, 0.06);
	}

	.order-pri-a:nth-child(3) {
		padding: 34rpx 0 24rpx;
		border-top: 4rpx solid rgba(0, 0, 0, 0.06);
	}
</style>
